<!-- 网页执行 网上往下执行 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1、引入vue.js -->
    <script src="./js/vue.js"></script>
</head>

<body>
    <!-- 2、创建视图 -->

    <!-- 对于btn组件来说，id为app的div为它的父级 -->
    <!-- id为app的div来说,btn组件就是它的子级 -->

    <div id="app">
        <!-- 2、全局组件的使用 -->
        <!-- msg不添加:，则数据是固定的，不会改变 -->
        <btn msg="父组件传递过来的值，456"></btn>
        <btn v-bind:msg="msg1"></btn>
        <btn :msg="msg2"></btn>
        <btn></btn>

    </div>
</body>

</html>
<script>

    // ctrl+/ 生成单行注释
    
    // 需求： 定义一个全局组件
    // Vue.component("组件名","{组件参数}")
    /**
     * 1、定义一个全局组件，功能为点击按钮+1
     **/ 
    Vue.component("btn",{
        // <button>当前父组件传递过来的值为：{{msg}} 2、显示父组件传递过来的值
        template:"<div><button v-on:click='++count'>点击+1-当前值为：{{count}}</button><button>当前父组件传递过来的值为：{{msg}}</button></div>",
        data(){
            return {
                count:0 //定义count变量，初始值为0
            }
        },
        // 1、子组件定义接口字段
        props:['msg']
    })

    // 3、创建实例
    new Vue({
        el: "#app", //必传
        data(){
            return {
                msg1:"父组件中定义的变量1",
                msg2:"父组件中定义的变量2"
            }
        }
    })

</script>